<!DOCTYPE HTM>
<html>
<head>
<title>D3 Hero Panel</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!-- css -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="css/d3.css" />
<!-- javascript -->
<script src="jquery/jquery-1.7.1.min.js"></script>
<script src="jquery/jquery.mobile-1.1.1.min.js"></script>
<script src="js/d3_cn_att.js"></script>
<script src="js/d3_main.js"></script>
</head>
<body>
<!-- Page : seelct class -->
<div id="pgCls" data-role="page">
    <div data-role="header">
        <h1>D3 Hero Panel</h1>
    </div>
    <div data-role="content">
       <div id="pnCls">
            <ul data-role="listview">
                <li data-role="list-divider"><h2>请选择职业</h2></li>
                <li><a href="#pgMain" cls="bb">野蛮人</a></li>
                <li><a href="#pgMain" cls="mo">武僧</a></li>
                <li><a href="#pgMain" cls="wd">巫医</a></li>
                <li><a href="#pgMain" cls="wi">秘法师</a></li>
                <li><a href="#pgMain" cls="dh">魔猎人</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- Page : main -->
<div id="pgMain" data-role="page">
    <!-- header -->
    <div data-role="header" data-position="fixed">
        <h1>D3 Hero Panel</h1>
        <a href="#pgCls" data-icon="home" data-direction="reverse">Home</a>
        <!-- bar -->
        <div data-role="navbar">
            <ul>
                <li><a id="lnkAtrr" href="#">属性</a></li>
                <li><a id="lnkEqu" href="#">装备</a></li>
                <li><a id="lnkSkill" href="#">技能</a></li>
            </ul>
        </div>
    </div>
    <div data-role="content">
        <!-- Panel : Attribute -->
        <div id="pnAtrr" class="panel">
            <ul id="lstAtrr" data-role="listview" data-theme="c"></ul>
        </div>
        <!-- Panel : Equipment -->
        <div id="pnEqu" class="panel">
            <div data-role="collapsible" data-theme="e" data-content-theme="e" data-mini="true">
                <h3>主手</h3>
                <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>符文劍</h3>
                           <h3>伤害: 1024.0  (1024-1024)</h3>
                           <p class="ui-li-aside">攻速： 1.0</p></a>
                        <a data-theme="e">re</a>
                    </li>
                    <li class="d3-color-blue">+286 - 381 点傷害</li>
                    <li class="d3-color-blue">爆擊傷害提高 100%</li>
                    <li class="d3-color-blue">攻擊速度提高 11%</li>
                    <li class="d3-color-blue">+50% 傷害</li>
                    <li data-icon="plus"><a href="#" id="lnkAfx">添加詞綴</a></li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="b" data-content-theme="b" data-mini="true">
               <h3>副手</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
               <h3>頭部</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
               <h3>肩膀</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
               <h3>身軀</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
               <h3>手腕</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
               <h3>手掌</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
               <h3>腰部</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
               <h3>腿部</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
               <h3>腳步</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
               <h3>護身符</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
               <h3>戒指（左）</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
               <h3>戒指（右）</h3>
               <ul data-role="listview" data-inset="true">
                    <li data-icon="arrow-d">
                        <a><h3>未装备</h3></a>
                        <a data-theme="c">re</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Panel : Skill -->
        <div id="pnSkill" class="panel">
            技能选择（施工中。。。）
        </div>
        <!-- Panel : Affixes -->
        <div id="pnAfx" class="panel">
            <ul data-role="listview" data-divider-theme="b" data-filter="false">
                <li data-role="list-divider">--- 傷害 ---</li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)</p>
                    <p class="d3-color-blue">(10.0-35.0)% 機率引發流血，在 5 秒內造成 (825-1628)-(826-3256) 點傷害。</p>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)<p>
                    <span class="d3-color-blue">對精英怪的傷害提高 (3-6)%</span>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)<p>
                    <p class="d3-color-blue">對精英怪的傷害提高 (3-6)%</p>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
                <li data-role="list-divider">--- 控場 ---</li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)<p>
                    <p class="d3-color-blue">對精英怪的傷害提高 (3-6)%</p>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)<p>
                    <p class="d3-color-blue">對精英怪的傷害提高 (3-6)%</p>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)<p>
                    <p class="d3-color-blue">對精英怪的傷害提高 (3-6)%</p>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
            </ul>
        </div>
    </div>
    <!-- Panel : Affixes footer-->
    <div id="pnAfxFoot" data-role="footer" data-position="fixed" class="panel">
        <!--<div data-role="navbar">
            <ul>
                <li><a id="lnkToEqu" href="#">返回</a></li>
                <li><a href="#">最高</a></li>
                <li><a href="#">全部</a></li>
            </ul>
        </div>-->
        <div class="ui-grid-b">
            <div class="ui-block-a">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <a id="lnkToEqu" href="#" data-role="button" data-icon="back">返回</a>
                </fieldset>
            </div>
            <div class="ui-block-b">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
                    <label for="radio-choice-c">最高</label>
                    <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
                    <label for="radio-choice-d">全部</label>
                </fieldset>
            </div>
            <div class="ui-block-c"></div>
        </div>
    </div>
</div>
</body>
</html>